<template>
	<view>
		<view class="tn-flex tn-text-center" style="background-color: white; width: 100%;position: fixed;z-index: 999;">
			<view style="color:red; size: 1.2em;" class="tn-icon-notice tn-padding-sm tn-text-lg">
				半透明红色边框时2mm的出血，虚线框内是成品，重要内容请在虚线框以内3mm，切到概不负责
			</view>
		</view>
		<div style="height: 95vh;">
			<qf-image-cropper :width="w" :height="h" :sizeList="sizeList" :showBorder="true" :showGrid="true" @crop="handleCrop" :enableScale="false"
				@changeArea="changeArea">
				
			</qf-image-cropper>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				w: 30,
				h: 100,
				source: null,
				itemData: {},
				sizeList: [
					{
						width: 300,
						height: 300,
						title: '300x300cm'
					}
				],
			}
		},
		onLoad(option) {
			this.source = option.source;
			console.log('来源:', this.source);
			
			// 别问我啥意思。这是官方文档提供的
			const eventChannel = this.getOpenerEventChannel();
			// 你可以在这里直接接受，这里不是$on
			const that = this;
			eventChannel.on('sendPayGoods', (data) => {
				// 这是data 就是上个页面传递的对象了
				that.itemData = data;
				console.log('接收到回传过来的数据了:', data);
				
				// 针对买赠场景，支持选择多张图片进行裁剪
				let specList = data.goodsInfo.specList;
				let sizeList = []
				if (specList) {
					// 商品详情，下单过来的
					for(let spec of specList) {
						sizeList.push({
							'specId': spec.specId,
							'width': this.$API.cm2px(spec.sizeW),
							'height': this.$API.cm2px(spec.sizeH),
							'title': spec.specItems[0]['value'] + spec.specItems[0]['unit']
						})
					}
				} else {
					// 订单详情过来的
					for (let spec of data.goodsInfo.specItems) {
						const val = spec.value
						const cell = val.split('x')
						let w = parseInt(cell[0]),
							h = parseInt(cell[1]);
						sizeList.push({
							'specId': spec.specId,
							'width': this.$API.cm2px(w),
							'height': this.$API.cm2px(h),
							'title': val + spec['unit']
						})
					}
				}
				that.sizeList = sizeList;
				console.log('sizeList: ---> ', that.sizeList);

				
				// 第一张图片的大小，对于从订单详情过来的，总是一张一张的选择
				const specInfo = data.specInfo;
				const val = specInfo.specItems ? specInfo.specItems[0].value : specInfo.value;
				const cell = val.split('x')
				let w = parseInt(cell[0]),
					h = parseInt(cell[1]);
				
				that.w = this.$API.cm2px(w);
				that.h = this.$API.cm2px(h);
				console.log('w: ', that.w, 'h:', that.h);
			})
		},
		onShow() {
			this.initImgToken();
		},
		methods: {
			handleCrop(e) {
				console.log('图片裁剪完成，返回结果', this.source, e);
				if (this.source && this.source == 'order') {
					// 订单详情过来的，退回详情
					let res = {
						'sizeList' : e.sizeList,
						'detail' : this.itemData.goodsInfo
					}
					uni.$emit('imgReplace', res);
					uni.navigateBack({delta: 1});
					
				} else {
					// 商品详情过来的，进入下单页
					this.itemData['sizeList'] = e.sizeList; // 裁剪图
					// 进入下单页面
					uni.navigateTo({
						url: `/pages/order/createOrder`, //建议这么写
						// 版本2.8.9+ 支持
						success: (res) => {
							// 和上面其实没差什么,但是这种方式是可以的 这里不是$emit
							res.eventChannel.emit('sendPayGoods', this.itemData)
						}
					})
				}
			},
			changeArea(e) {
				let {
					left,
					right
				} = e;
				if (left == 2) {
					this.w = 500;
					this.h = 750;
				} else if (left == 3) {
					this.w = 600;
					this.h = 800;
				} else if (left == 16) {
					this.w = 1600;
					this.h = 900;
				}
			},
			initImgToken() {
				// 提前存储号对应的图片上传token
				let token = this.$Net.fetchImgUploadToken(this.$API.fetchImgUploadToken());
				console.log('图片token: ', token);
			}
		}
	}
</script>

<style>
	.container {
		/** 外层一定要指定大小 */
		height: 100vh;
	}
</style>